<template>
    <massif-layout>
        <template v-slot:left>
            <div class="massifIndex">
                <div class="tobBox">
                    <div class="back" @click="goBack">
                        <el-icon><ArrowLeft /></el-icon>
                        <span>返回</span>
                    </div>
                    <h5>地块属性详情</h5>
                    <div class="btnBox">
                        <el-icon title="删除" @click="del"><Delete /></el-icon>
                        <el-icon v-if="tabIndex==1" title="编辑" @click="goEdit"><Edit /></el-icon>
                    </div>
                </div>
                <div class="tabBox">
                    <el-tabs v-model="tabIndex" class="demo-tabs" @tab-click="handleClick" style="width: 100%;">
                        <el-tab-pane label="基本信息" name="1"></el-tab-pane>
                        <el-tab-pane label="土壤成分" name="2"></el-tab-pane>
                      </el-tabs>
                </div>
                <div class="ltMainBox" v-if="detail">
                    <base-info v-if="tabIndex==1" :detail="detail"/>
                    <soil-info v-else-if="tabIndex==2" :detail="detail" @set="tabIndex=1"/>
                </div>
            </div>
        </template>
        <tencent-map ref="mapRef"/>
        <map-mode-control v-if="mapRef" :mapObj="mapRef"/>
    </massif-layout>
</template>
  
  <script setup>
  // 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
  
  import { nextTick, ref, watch, onActivated,reactive,onMounted} from 'vue'
  import{useRouter} from "vue-router"

  import {getLandDetail,delFarmLand} from '@/api/plant'
  import {message} from '@/utils/element'

  import massifLayout from '../components/layout.vue'
  import baseInfo from './components/baseInfo.vue'
  import soilInfo from './components/soilInfo.vue'
  import tencentMap from '@/components/custom/tencentMap.vue'
  import mapModeControl from '@/components/custom/mapModeControl.vue'
  import { useUserStore } from '@/pinia/modules/user'
  import { ElMessageBox } from 'element-plus'

  const router = useRouter()
  const userStore = useUserStore()
  
  const mapRef = ref(null)
  const farmLandId = ref('') // 地块id
  const tabIndex = ref('1')
  const detail = ref('') // 详情数据
  let hoverInfowindowObj = ref('')
  let mapAreaObj = ref('')
  
  onMounted(async ()=>{
    farmLandId.value = router.currentRoute.value.query.id
    get_land_detail()
    await nextTick()

  })
  
  const get_land_detail = ()=>{
    getLandDetail(farmLandId.value).then(res=>{
        detail.value = res.data
        mapRef.value.setCenter(detail.value.locationLatitude,detail.value.locationLongitude) // 设置地图中心点
        createMapArea(JSON.parse(detail.value.location),detail.value) // 绘制地图区域
        mapRef.value.setZoom(14.8)
    })
  }
  
  // 在地图上创建地块区域
  const createMapArea = (locations,item)=>{
    let paths = []
    let obj = {
        path:[],
        styleId:'styel1',
        farmLandId:item.farmLandId,
        itemData:item,
    }
    locations.forEach(ele =>{
        obj.path.push(ele.lat)
        obj.path.push(ele.lng)
    })
    paths.push(obj)
    mapAreaObj = mapRef.value.createArea(paths)
    mapRef.value.setMarker2(item.locationLatitude,item.locationLongitude,mapShowTemplate(item,'mapMarker'))
    // 添加鼠标hover事件
    // mapAreaObj.on("hover",function(e){
        
    //     if(e.detail.area){ // 点击了区域
    //         const item = e.detail.area.itemData
    //         hoverInfowindowObj = mapRef.value.setMarker2(item.locationLatitude,item.locationLongitude,mapShowTemplate(item,'mapMarker'))
    //     }else{
    //         hoverInfowindowObj && hoverInfowindowObj.destroy()  // 销毁
    //     }
    // })
  }

  const goBack = ()=>{
    router.back(-1)
  }

  const goEdit= ()=>{
    router.push(`/full/massif/add?farmLandId=${detail.value.farmLandId}`)
  }

  const del = (item)=>{
    ElMessageBox.confirm('确认删除地块吗?','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await delFarmLand([detail.value.farmLandId])
        if(res.code ==0 || res.success){
            message("删除成功",2)
            goBack()
        }else{
            message(res.message,3)
        }
    })
  }
  const handleClick = ()=>{
    
  }
  const mapShowTemplate = (item,className='mapMarker') =>{
    return `<div class="${className}">
            <div class="conbox">
                <p><b>分组名称：</b>${item.groupName}</p>
                <p>${item.locationAddress}</p>
            </div>
            <div class="conbox">
                <p><b>面积：</b>${item.areaSize}</p>
                <p><b>地块权属：</b>${item.landBelong}</p>
            </div>
        </div>`
  }
  </script>
  
  <style lang="scss" scoped>
    .massifIndex{
        box-sizing: border-box;
        display: flex;
        flex-flow: column;
        height: 100%;
        padding: 10px 0;
        overflow: hidden;
        .tobBox{
            position: relative;
            z-index: 10;
            font-size: 12px;
            box-sizing: border-box;
            align-items: center;
            height: 30px;
            line-height: 29px;
            padding: 0 10px;
            border-bottom: 1px solid #e9e7e7;
            h5{
                font-size: 13px;
                font-weight: normal;
                text-align: center;
            }
            .back{
                display: flex;
                align-items: center;
                position: absolute;
                left: 10px;
                top: 0;
                z-index: 10;
                height: 100%;
                line-height: 29px;
                font-size: 12px;
                cursor: pointer;
                &:hover{
                    color: #48b27a;
                }
                span{
                    flex-shrink: 0;
                }
            }
            .btnBox{
                display: flex;
                align-items: center;
                position: absolute;
                right: 10px;
                top: 0;
                z-index: 10;
                height: 100%;
                i{
                    font-size: 18px;
                    cursor: pointer;
                    &:hover{
                        color: #48b27a;
                    }
                    &+i{
                        margin-left:10px ;
                    }
                }
            }
        }
        .tabBox{
            display: flex;
            box-sizing: border-box;
            align-items: center;
            height: 40px;
            padding: 0 15px;
            overflow: hidden;
        }
        
        .ltMainBox{
            box-sizing: border-box;
            //flex: 1;
            height: calc(100vh - 174px);
            flex-shrink: 0;
            width: 100%;
            padding: 0 10px;
            overflow: hidden;
            overflow-y: auto;
        }
        .bottom-page{
            box-sizing: border-box;
            flex-shrink: 0;
            height: 30px;
            padding: 0 15px;
        }
    }
  </style>
  <style lang="scss">
  .tabBox{
    .el-tabs__header {
        margin: 0;
    }
    .el-tabs__nav{
        display: flex;
        width: 100%;
        .el-tabs__item{
            flex: 1;
            text-align: center;
            font-size: 12px;
        }
    }
  }
  </style>
  